<script>
import CategoryCom from './components/CategoryCom.vue';
import ListCom from './components/ListCom.vue';
    export default{
        data(){
            return{
                books:[
                    {
                        id:"b001",
                        cid:1,
                        name:"《鲁迅全集》"
                    },
                    {
                        id:"b002",
                        cid:1,
                        name:"《埃及神话》"
                    },
                    {
                        id:"b003",
                        cid:2,
                        name:"《经济学的诡计》"
                    },
                    {
                        id:"b004",
                        cid:3,
                        name:"《大话中国艺术史》"
                    },
                    {
                        id:"b005",
                        cid:3,
                        name:"《敦煌艺术通识课》"
                    },
                ],
                list:[]
            }
        },
        mounted(){
            this.list = this.books.slice()
        },
        components:{
            CategoryCom,
            ListCom
        },
        methods:{
            categoryHandler(cid){
                this.list = this.books.filter(book => book.cid === cid)
            }
        }
    }
</script>

<template>
    <div class="conainer">
        <div class="left">
            <CategoryCom @category="categoryHandler"/>
        </div>
        <div class="right">
            <ListCom :books="list"/>
        </div>
    </div>
</template>

<style scoped>
.container{
    overflow: hidden;
    width: 60px;
}
.container .left,
.container .right{
    float: left;
    margin-bottom: -10000px;
    padding-bottom: 10000px;
}
.container .left{
    width: 20%;
    background: rgb(237, 228, 229);
}
.container .right{
    align-content: left;
    width: 80%;
    background: rgb(205, 222, 245);
}
</style>